﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
	<meta name="msvalidate.01" content="18C4FA5D338977C15D10C8F4EBFDF4D1" />
	<link rel="stylesheet" type="text/css" href="css/style.css">

	<!-- core libs -->
	<script src="libs/jquery-1.11.3.min.js"></script>
	<script src="libs/jquery.validate.min.js"></script>
	<script src="libs/stats.min.js"></script>
	<script src="libs/three.min.js"></script>
	<script src="libs/Tween.js"></script>
	<script src="src/webGL.js"></script>
	<script src="src/noWebGL.js"></script>
	<script src="src/audio.js"></script>
	<script src="data/data.js"></script>


	<!-- shaders -->
	<script src="libs/shaders/IDRGBShiftShader.js"></script>
</head>
<body>

	<script>
		var dataLayer = [];
	</script>

	<div class="container" id="container">
		<div class="standard-header">
			<div class="titles">
				<div class="title"></div>
				<div class="sub-title"></div>
			</div>
			<nav></nav>
		</div>
		<div class="mobile-header">
			<div class="title"></div>
			<div class="sub-title"></div>
		</div>
		<button id="mobile-menu-button" class="c-hamburger c-hamburger--htx">
	  		<span>toggle menu</span>
		</button>
		<div id="mobile-overlay">
			<div id="mobile-overlay-title"></div>
			<div id="mobile-overlay-line"><img src="assets/images/line.png"/></div>
			<div id="mobile-overlay-sub-title"></div>
			<nav></nav>
			<div id="sound">
				<span id="bar-1" class="bar"></span>	
				<span id="bar-2" class="bar"></span>	
				<span id="bar-3" class="bar"></span>	
				<span id="bar-4" class="bar"></span>	
			</div>

		</div>

		<section id="webgl-content"></section>
		<section id="no-webgl-content">
			<div>error: no webgl</div>
		</section>

		<section id="right-content">

			<script>
				function show_footer(){
					$("footer").show();
					$("#container").css('overflow','auto');
				}
			</script>
			<div style="margin:5px;">
				<a href="#" style='text-decoration:none;'">
				<ul id="real_time_info" style="padding-left:10px;">
				</ul>
				</a>
			</div>	
			
<script>

		/* 添加实时信息 */
		function add_li(txt){
			
			var my_li = document.createElement("li");
			my_li.innerHTML = (new Date()).getMinutes() + ":" + (new Date()).getSeconds() + " " + txt;
			
			var my_ul = document.getElementById("real_time_info");
			my_ul.appendChild(my_li);

			// 如果信息太多，每增加一条时，删除最旧的一条
			if(my_ul.childNodes.length > 10){
				del_li();
			}
		}
		
		/* 删除实时信息 */
		function del_li(){
	
			var my_ul = document.getElementById("real_time_info");
			if (my_ul.childNodes.length > 0){
				my_ul.removeChild(my_ul.childNodes[0]);
			}

			if(my_ul.childNodes.length == 0){
				add_li("Waiting for information ... ")
			}
		}

		// 定时删除显示信息
		setInterval(function(){ del_li();},1000);

	</script>

		</section>

		<section id="left-content">
			
		</section>
		
		<ul id="date-content" class="noselect">
			<!--日期显示-->
			<li class="month number">01</li><li class="divider-x">x</li><li class="day number">01</li><li class="divider-x">x</li><li class="year number">96</li>
		</ul>
		<div id="buttons">
			<!--播放和停止按钮，可以加入文字-->
			<div id="play-button" class="button" ><img class="desktop_backer" src="assets/images/play.png" /><img class="mobile_backer" src="assets/images/mobile_button_backer_orange.png" /><span></span></div>
			<div id="explore-button" class="button"><img class="desktop_backer" src="assets/images/pause.png" /><img class="mobile_backer" src="assets/images/mobile_button_backer.png" /><span></span></div>
		</div>
		
	
		<footer style="width:100%">
		</footer>

<script src="src/main.js"></script>	

<!--<script src="lib/socket.io.js"></script>-->
<script src="/socket.io/socket.io.js"></script>

<script src="config.js"></script>

<script>
  
  	//连接服务器
  	sa_origins_host = window.location.protocol + "//" + window.location.host;
	var socket = io(sa_origins_host);

	//hook ajax open，捕捉错误
	var hook_ajax_open = XMLHttpRequest.prototype.open;
	XMLHttpRequest.prototype.open = function () {
		
		var xhrInstance = this; 
		xhrInstance.addEventListener("error", function (e) { 
			console.log("Error while connecting to ShareWAF server!");
			return;
		});

		return hook_ajax_open.apply(this, arguments);        
	}

  /*
   * 访客信息
   */
  socket.on('server_visitor', function (data) {
	console.log('server_visitor', data);
	if(data.event.indexOf(domain)==-1){return;}
	
	realtime_visitor(data.lat, data.lng);
	add_li(data.event);
  });

  /*
   * 事件信息
   */
  socket.on('server_event', function (data) {
	console.log('server_event', data);
	
	if(data.event.indexOf(domain)==-1){return;}
	realtime_event(data.lat, data.lng, data.time, data.event);
	add_li(data.event);
  });



//获取参数
var index = window.location.toString().indexOf("d=")+2;
var domain = (window.location.toString().substr(index));

</script>
      
   
</body>
</html>